<template>
  <div style="padding: 10px;">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-top: 20px;" v-show="showSearch">
      <el-form-item label="图书名称" style="padding-left: 20px;">
        <el-input v-model="queryParams.name" placeholder="图书名称" clearable @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item v-if="$store.getters.name === 'admin' || $store.getters.name === 'ls'" label="用户">
        <el-input v-model="queryParams.userName" placeholder="用户" clearable @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="罚款是否已交">
        <el-select v-model="queryParams.isIndemnify" placeholder="罚款是否已交">
          <el-option label="已交" value="1"></el-option>
          <el-option label="未交" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery" icon="el-icon-search" size="small">查询</el-button>
        <el-button type="primary" @click="handleRset" icon="el-icon-refresh" size="small">重置</el-button>
      </el-form-item>

    </el-form>

    <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="selectDelete"
      v-hasPermi="['system-fine:fine:remove']" :disabled="multiple">删除
    </el-button>
    <!-- 切割线 -->
    <el-divider></el-divider>

    <!-- 2.表格 -->
    <el-table v-loading="loading" :data="fineList" @selection-change="handleSelectionChange" border>
      <el-table-column v-if="$store.getters.name === 'admin' || $store.getters.name === 'ls'" type="selection" width="55"
        align="center" />
      <el-table-column label="编号" align="center" prop="penaltyId" />
      <el-table-column label="图书名称" align="center" prop="name">
        <template slot-scope="scope">
          <span>
            《{{
              scope.row.name
            }}》
          </span>
        </template>
      </el-table-column>
      <el-table-column label="书本金额" align="center" prop="price">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.price
            }}元
          </span>
        </template>
      </el-table-column>
      <el-table-column label="赔偿金额" align="center" prop="penaltyPrice">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.penaltyPrice
            }}元
          </span>
        </template>
      </el-table-column>
      <el-table-column v-if="$store.getters.name === 'admin' || $store.getters.name === 'ls'" label="用户" align="center"
        prop="userName" />
      <el-table-column label="罚款日期" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.createTime === null">
            ----
          </span>
          <span v-else>
            {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="截至日期" align="center" prop="shouldTime" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.shouldTime === null">
            ----
          </span>
          <span v-else>
            {{ moment(scope.row.shouldTime).format('YYYY-MM-DD') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否赔偿" align="center" prop="isIndemnify">
        <template slot-scope="scope">
          <!-- <span v-if="scope.row.isIndemnify === 1" style="color: #333;">已赔偿</span> -->
          <span><el-tag type="success" v-if="scope.row.isIndemnify === 1">已赔偿</el-tag>
            <el-tag type="danger" v-else>未赔偿</el-tag></span>
          <!-- <span v-else style="color: red;">未赔偿</span> -->
        </template>
      </el-table-column>
      <el-table-column v-if="$store.getters.name === 'admin' || $store.getters.name === 'ls'" label="操作" align="center"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system-fine:fine:edit']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system-fine:fine:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="margin: 10px 50px;">
      <!-- <Pagination></Pagination> -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号" prop="penaltyId">
          <el-input v-model="form.penaltyId" placeholder="请输入编号" :disabled="true" />
        </el-form-item>
        <el-form-item label="赔偿金额" prop="penaltyPrice">
          <el-input v-model="form.penaltyPrice" placeholder="请输入赔偿金额" />
        </el-form-item>
        <el-form-item label="截止日期" prop="shouldTime">
          <el-date-picker v-model="form.shouldTime" type="date" placeholder="选择日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="是否已经赔偿" prop="isIndemnify">
          <el-select v-model="form.isIndemnify" placeholder="请选择是否已经赔偿">
            <el-option label="已赔偿" value="1"></el-option>
            <el-option label="未赔偿" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="adminRemark">
          <el-input v-model="form.adminRemark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>

import data from "../system/dict/data.vue";

var moment = require('moment');
// import Pagination from "@/components/Pagination/Pagination";
import Pagination from "@/components/Pagination/index";
import { searchFine, delFine, editFine } from "@/api/fine/fine";
import { getInfo } from "@/api/login";

export default {
  components: {
    Pagination
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        changeFine: null,
        isIndemnify: null,
        userName: null,
        penaltyId: null,
      },
      title: "",
      // 是否显示弹出层
      open: false,
      fineList: [],
      total: 0,
      showSearch: true,
      loading: false,
      ids: [],
      // form: {},
      dialogFormVisible: false,
      form: {
        penaltyId: null,
        isIndemnify: null,
        adminRemark: null,
        penaltyPrice: null,
        shouldTime: new Date(),
      },
      multiple: true,

    }
  },
  mounted() {

  },
  created() {
    this.getList(),
      console.log('获取当前时间', new Date(), moment().format('YYYY-MM-DD HH:mm:ss'))
    // console.log('当前角色', currentUser.roles())
    // const userName = currentUser.roles()

  },
  methods: {
    moment,
    // 查询罚款列表
    getList() {
      this.loading = true;
      searchFine(this.queryParams).then(response => {
        console.log('测试接口数据11,', response)
        this.fineList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(err => {
        console.log(err)
      })
    },

    handleUpdate(row) {
      // 将当前行数据赋值给表单
      this.form.adminRemark = row.adminRemark;
      this.form.penaltyId = row.penaltyId;
      this.form.penaltyPrice = row.penaltyPrice;
      if (row.shouldTime==null){
        this.form.shouldTime =new Date();
      }
      else {
        this.form.shouldTime = row.shouldTime;
      }

      this.form.isIndemnify = row.isIndemnify + "";
      // 打开编辑弹窗
      this.dialogFormVisible = true;
    },
    // handleUpdate(row) {
    //     this.dialogFormVisible = true; // 打开编辑弹窗
    //     this.form = { ...row }; // 将当前行的数据赋值给编辑表单的数据，以便进行修改
    // },
    submitForm() {
      // 调用编辑接口保存数据
      console.log('编辑接口数据:', this.form),
        editFine(this.form).then(() => {
          this.getList(); // 重新获取列表数据
          this.dialogFormVisible = false; // 关闭编辑弹窗
          this.$message.success('保存成功');
        }).catch(error => {
          console.error(error);
          this.$message.error('保存失败');
        });
    },

    cancel() {
      this.dialogFormVisible = false; // 关闭编辑弹窗
      this.$message.error('取消修改');
    },
    handleQuery() {
      this.loading = true;
      searchFine(this.queryParams).then(response => {
        console.log('搜索接口数据:', response.rows);
        console.log('长度',response.rows.length)
        if (response.rows.length > 0) {
          this.fineList = response.rows;
          this.total = response.total;
        } else {
          this.fineList = [];
          this.total = 0;
          this.$message.warning('记录为空');
        }
        this.loading = false;
      }).catch(err => {
        console.error('搜索接口错误:', err);
        this.loading = false;
      });
    },
    //删除操作
    handleDelete(row) {
      const penaltyIds = row.penaltyId || this.ids;
      this.$modal.confirm('是否确认删除罚款编号为"' + penaltyIds + '"的数据项？').then(function () {
        // let str = penaltyIds.join(',');
        // return delFine(str);
        return delFine({ penaltyIds });
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch((error) => {
        console.error(error);
        this.$modal.msgError("删除取消"); // 显示删除失败的消息
      });
    },
    //批量删除
    selectDelete(row) {

      const lendIds = row.penaltyId || this.ids
      console.log('删除', lendIds);
      if (!lendIds.length) {
        this.$modal.msgError('请选择要删除的数据')

        return
      }
      else if (lendIds.length) {
        this.$modal.confirm('是否确认删除岗位编号为"' + lendIds + '"的数据项？').then(function () {
          console.log('删除', lendIds);
          let lendIdsStr = lendIds.join(',')
          return delFine({ penaltyIds: lendIdsStr })
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
      }

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.penaltyId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    getUserDetails() {
      getInfo() // 调用 getInfo 函数
        .then(response => {
          // this.user = response.data.user;
          this.roles = response.data.roles;
        })
        .catch(error => {
          console.error(error);
        });
    },
    handleRset() {
      this.queryParams.name = '';
      this.queryParams.userName = '';
      this.queryParams.isIndemnify = null;
      // 其他重置逻辑...
      this.getList();
    }

  }
}
</script>
